<template>
  <div class="user-list">
    <div v-for="user in users" :key="user.id" class="user-item">
      <router-link :to="'/userinfo?id=' + user.id">
        <img 
          :src="user.avatar || '/assets/avatar/default.jpg'" 
          class="avatar"
        />
      </router-link>
      <div class="user-info">
        <router-link 
          :to="'/userinfo?id=' + user.id" 
          class="username-link"
        >
          <span class="username">{{ user.username }}</span>
        </router-link>
        <span class="sign">{{ user.sign || "这个用户很懒，什么都没写" }}</span>
      </div>
      <!-- 添加操作按钮显示控制 -->
      <div class="action" v-if="!hideActions">
        <el-button
          v-if="!isFollowed(user.id)"
          type="primary"
          size="small"
          @click.stop="$emit('follow', user.id)"
        >
          关注
        </el-button>
        <el-button
          v-else
          type="danger"
          size="small"
          @click.stop="$emit('unfollow', user.id)"
        >
          取消关注
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  users: {
    type: Array,
    default: () => [],
  },
  isFollowed: {
    type: Function,
    default: () => false,
  },
  // 新增控制操作按钮显示的prop
  hideActions: {
    type: Boolean,
    default: false
  }
});

defineEmits(["follow", "unfollow"]);
</script>

<style scoped>
.user-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-item {
  display: flex;
  align-items: center;
  padding: 12px;
  border-radius: 8px;
  transition: background-color 0.3s;
}

.user-item:hover {
  background-color: #f5f7fa;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 12px;
}

.user-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: bold;
  margin-bottom: 4px;
}

.sign {
  font-size: 12px;
  color: #909399;
}

.action {
  margin-left: auto;
}

.username-link {
  text-decoration: none;
  color: inherit;
}

.avatar {
  cursor: pointer;
  transition: transform 0.2s;
}

.avatar:hover {
  transform: scale(1.05);
}
</style>
